<!--客诉单列表-->
<template>
  <card-wrapper :data-item="dataItem" class="w-288">
    <template #header>
      <p class="ml-8 font-12 num-wrapper">
        <span class="text-5A6F82">{{ $i18n.t("mind.customerComplaint") }}</span>
        <span
          class="ml-4 color-F26A60"
          v-if="dataItem.searchResults && dataItem.searchResults.length > 0"
          >{{ dataItem.searchResults.length }}</span
        >
      </p>
    </template>
    <div class="dataList new-custom-scrollbar" @wheel.stop>
      <div
        v-for="(item, index) in dataItem.searchResults"
        :key="index"
        @click="handleClick(item)"
        class="flex flex-col p-8 bg-EBF0F5 radius-4 hover:bg-DBEAFF"
        :class="{
          'bg-DBEAFF': active === item[dataItem.mainField],
          'mt-8': index > 0,
        }"
      >
        <!--单号,状态-->
        <area-top
          :text-left="item['客诉单号'] || '无'"
          :text-right="item['状态'] || '无'"
        />
        <!--客户名称-->
        <label-icon
          :label="item['客户名称'] || '无'"
          type="customer"
          class="mt-12"
        />
        <!--名片-->
        <label-normal
          :label="$i18n.t('mind.severeLevel')"
          :value="item['严重等级'] || '无'"
          class="mt-8"
        />
        <label-normal
          :label="$i18n.t('mind.processResult')"
          :value="item['处理结果'] || '无'"
          class="mt-8"
        />
      </div>
    </div>
  </card-wrapper>
</template>

<script>
import CardWrapper from "@/views/mind/components/common/card-wrapper.vue";
import AreaTop from "@/views/mind/components/common/area-top.vue";
import LabelIcon from "@/views/mind/components/common/label-icon.vue";
import LabelNormal from "@/views/mind/components/common/label-normal.vue";
export default {
  name: "card-complain-list",
  props: {
    dataItem: {
      type: Object,
      default: () => {},
    },
  },
  components: { CardWrapper, AreaTop, LabelIcon, LabelNormal },
  data() {
    return {
      active: "",
    };
  },
  methods: {
    handleClick(item) {
      const dataItem = this.dataItem;
      this.$emit("handleClick", { item, dataItem });
    },
  },
};
</script>

<style lang="scss" scoped>
.num-wrapper {
  background: #ebf0f5;
  border-radius: 2px 2px 0 0;
  padding: 2px 4px;
}
.dataList {
  max-height: 324px;
  padding: 0 16px;
  overflow-y: auto;
}
</style>
